<!--
 @description 新增门店-详情内容
 @fileName DetailInfo.vue
 @author zengqiongying
 @created 2023/04/21 12:44:44
-->
<template>
  <div class="archive-change-detail">
    <qmp-tabs v-model:active="tabActive" :offset-top="offsetTop" scrollspy sticky>
      <qmp-tab title="门店信息">
        <Card no-mg :round="false">
          <DealerCell :detail="dealerData" />
          <Cell
            title="是否需要其他业务客户经理接收知晓"
            :modelValue="detail.isOtherReceiveManagerKnow"
            default-value="--"
            readonly
            dict-type-code="BOOLEANS"
          />
          <template v-if="[1, '1'].includes(detail.isOtherReceiveManagerKnow)">
            <Cell title="接收客户经理" default-value="--" readonly :modelValue="detail.receiveManagerName" />
            <template v-if="!!detail.receiveManagerCode">
              <Cell :modelValue="detail.receiveManagerCode" title="接收客户经理编码" readonly />
              <Cell :modelValue="detail.receiveManagerTypeName" title="接收客户经理类型" readonly />
              <Cell :modelValue="detail.receiveManagerTel" title="接收客户经理电话" readonly />
            </template>
          </template>
          <Cell title="提报意见" is-column custom :right="false" :modelValue="detail.submitAnOpinion" readonly />
        </Card>
        <Card title="门店信息" no-mg :round="false">
          <ShopItem :modelValue="shopInfo" />
        </Card>
        <Card no-mg :round="false" title="门店附件">
          <Cell title="营业执照图片" is-column custom readonly>
            <AttachmentUpload
              v-model="attachment.ACCESS060"
              view-type="image"
              type-code="ACCESS060"
              :limit="1"
              :objectId="shopInfo.id"
              :imageHeight="124"
              :imageColumn="2"
              readonly
            />
            <div v-if="attachment.ACCESS060.length === 0" class="no-data-msg">暂无数据</div>
          </Cell>
          <Cell title="专卖店特许经营合同图片" is-column custom readonly>
            <!-- <AttachmentUpload
              v-model="attachment.ACCESS061"
              view-type="image"
              type-code="ACCESS061"
              :limit="1"
              :objectId="shopInfo.id"
              :imageHeight="124"
              :imageColumn="2"
              readonly
            /> -->
            <AttachmentUpload v-model="attachment.ACCESS061" type-code="ACCESS061" :objectId="shopInfo.id" readonly />
            <div v-if="attachment.ACCESS061.length === 0" class="no-data-msg">暂无数据</div>
          </Cell>
        </Card>
      </qmp-tab>
      <qmp-tab title="门店联系人">
        <Card no-mg :round="false">
          <template #title>
            <div class="c-tab-title">
              <div class="name">门店联系人</div>
              <div v-if="shopContactsList.length > 0" class="more" @click="toPage('shopContacts')">详情</div>
            </div>
          </template>
          <Cell v-for="(item, i) in shopContactsList" :key="i" is-column custom readonly>
            <div class="dis-detail-item">
              <div>
                {{ item.name }}
                <span class="ml8">{{ item.contactPhone }}</span>
                <span
                  class="ml8 w-normal"
                  :class="{
                    'color-org': item.changeType === 'A',
                    'color-normal': item.changeType === 'B',
                    'color-error': item.changeType === 'C'
                  }"
                >
                  {{ getChangeTypeName(item.changeType) }}
                </span>
              </div>
              <div class="person">{{ item.contactTypeName }}</div>
            </div>
          </Cell>
          <qmp-empty v-if="shopContactsList.length === 0" description="暂无门店联系人" image-size="60px" />
        </Card>
      </qmp-tab>
      <qmp-tab title="收货地址">
        <Card no-mg :round="false">
          <template #title>
            <div class="c-tab-title">
              <div class="name">经销商收货地址</div>
              <div v-if="addressList.length > 0" class="more" @click="toPage('address')">详情</div>
            </div>
          </template>
          <Cell v-for="(item, i) in addressList" :key="i" is-column custom readonly>
            <div class="dis-detail-item">
              <div class="name">
                {{ item.name }}

                <span
                  class="ml8 w-normal"
                  :class="{
                    'color-org': item.changeType === 'A',
                    'color-normal': item.changeType === 'B',
                    'color-error': item.changeType === 'C'
                  }"
                >
                  {{ getChangeTypeName(item.changeType) }}
                </span>
              </div>
              <div class="color-grey">
                {{ item.provinceName }}{{ item.cityName }}{{ item.countryName }}{{ item.townName }}
                {{ item.address }}
              </div>
              <div class="person">
                {{ item.firstReceiver }} <span class="ml8">{{ item.firstReceiverPhone }}</span>
              </div>
            </div>
          </Cell>
          <qmp-empty v-if="addressList.length === 0" description="暂无经销商收货地址" image-size="60px" />
        </Card>
      </qmp-tab>
      <qmp-tab title="报图信息">
        <Card title="报图信息" no-mg :round="false">
          <Cell title="是否报图" :modelValue="shopInfo.isReportPic ? '是' : '否'" default-value="--" readonly />
          <Cell
            title="特殊建档附件"
            sub-title="(如未报图/未交保证金等情况，业务请示申请审核通过的流程附件)"
            is-column
            custom
            readonly
          >
            <AttachmentUpload v-model="attachment.ACCESS062" type-code="ACCESS062" :objectId="shopInfo.id" readonly />
            <div v-if="attachment.ACCESS062.length === 0" class="no-data-msg">暂无数据</div>
          </Cell>
        </Card>
      </qmp-tab>
      <qmp-tab title="交接情况">
        <Card title="经销商交接情况" no-mg :round="false">
          <Cell
            title="是否属于交接门店"
            :modelValue="detail.isMarketConnect ? '是' : '否'"
            default-value="--"
            readonly
          />
        </Card>
        <template v-if="detail.isMarketConnect">
          <Card v-for="(item, i) in handoverList" :key="i" no-mg :round="false">
            <template #title>
              <div class="c-tab-title">
                <span class="name">交接账号{{ i + 1 }}</span>
              </div>
            </template>
            <HandoverItem :modelValue="item" />
          </Card>
          <Card title="经销商交接附件" no-mg :round="false">
            <Cell title="经销商交接证明" is-column custom readonly>
              <AttachmentUpload v-model="attachment.ACCESS063" type-code="ACCESS063" :objectId="detail.id" readonly />
              <div v-if="attachment.ACCESS063.length === 0" class="no-data-msg">暂无数据</div>
            </Cell>
            <Cell title="经销商关系证明" is-column custom readonly>
              <AttachmentUpload v-model="attachment.ACCESS064" type-code="ACCESS064" :objectId="detail.id" readonly />
              <div v-if="attachment.ACCESS064.length === 0" class="no-data-msg">暂无数据</div>
            </Cell>
            <Cell title="交接双方现场签订照片" is-column custom readonly>
              <AttachmentUpload v-model="attachment.ACCESS111" type-code="ACCESS111" :objectId="detail.id" readonly />
              <div v-if="attachment.ACCESS111.length === 0" class="no-data-msg">暂无数据</div>
            </Cell>
          </Card>
        </template>
      </qmp-tab>
      <qmp-tab title="BPM审批信息">
        <Card title="审核结果" no-mg :round="false">
          <Cell title="申请人" :modelValue="detail.createBy" default-value="--" readonly />
          <Cell
            title="申请时间"
            :modelValue="parseTime(detail.createTime, '{y}年{m}月{d}日')"
            default-value="--"
            readonly
          />
          <Cell title="BPM单号" :modelValue="detail.applyNo" default-value="--" readonly />
          <div v-for="(v, i) in detail.opinionDTOS" :key="i" class="group-box">
            <Cell title="步骤名" :modelValue="v.strStepName" default-value="--" custom readonly />
            <Cell title="操作时间" :modelValue="v.dtCreateDate" default-value="--" readonly />
            <Cell title="操作人" :modelValue="v.strApproverName" default-value="--" readonly />
            <Cell title="操作状态" :modelValue="v.strAction" default-value="--" readonly />
            <Cell title="意见留言" :modelValue="v.strComments" default-value="--" custom readonly />
          </div>
          <!-- <Cell title="客户经理门店新建提报原始表单" is-column custom readonly divider>
            <AttachmentUpload v-model="attachment.ACCESS081" type-code="ACCESS081" readonly :objectId="detail.id" />
          </Cell>
          <Cell
            title="办事处审批结果"
            :modelValue="detail.officeReviewResult"
            dictTypeCode="REVIEW_RESULT"
            default-value="--"
            readonly
            custom
          />
          <Cell
            title="办事处审批意见"
            :modelValue="detail.officeReviewAdvice"
            default-value="--"
            readonly
            is-column
            custom
            divider
          />
          <Cell
            title="办事处会计处理意见"
            :modelValue="detail.officeAccountingReviewAdvice"
            default-value="--"
            readonly
            is-column
            custom
            divider
          />

          <Cell
            title="办事处审批完成时间"
            :modelValue="parseTime(detail.officeReviewTime, '{y}年{m}月{d}日')"
            default-value="--"
            readonly
            divider
          />
          <Cell
            title="档案科审核结果"
            :modelValue="detail.fileReviewResult"
            dictTypeCode="REVIEW_RESULT"
            default-value="--"
            readonly
            custom
            divider
          />

          <Cell
            title="档案科审批时间"
            :modelValue="parseTime(detail.fileReviewTime, '{y}年{m}月{d}日')"
            default-value="--"
            readonly
          />
          <Cell
            title="档案审核意见"
            :modelValue="detail.fileReviewAdvice"
            default-value="--"
            readonly
            is-column
            custom
            divider
          /> -->
        </Card>
      </qmp-tab>
    </qmp-tabs>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, toRefs, reactive, watch, onMounted, onActivated } from 'vue'
  import { useRouter } from 'vue-router'
  import Card from '@/components/Card/index.vue'
  import DealerCell from '@/components/DealerCell/index.vue'
  import Cell from '@/components/Cell/index.vue'
  import AttachmentUpload from '@/components/AttachmentUpload/index.vue'
  import { detail } from '@/apis/dealerMarketing/NewShop'
  import { parseTime } from '@/utils'
  import ShopItem from '../components/Shop/CreateItemView.vue'
  import HandoverItem from '../components/Handover/ItemView.vue'

  interface anyObjectModle {
    [key: string]: any
  }
  export default defineComponent({
    name: 'NewShopDetailInfo',
    components: { Card, Cell, DealerCell, AttachmentUpload, HandoverItem, ShopItem },
    props: {
      id: {
        type: String,
        default: ''
      }
    },
    setup(props, ctx) {
      const $router = useRouter()
      const datas = reactive<anyObjectModle>({
        tabActive: '基础信息',
        offsetTop: '46px',
        detail: {},
        attachment: {
          ACCESS060: [],
          ACCESS061: [],
          ACCESS062: [],
          ACCESS063: [],
          ACCESS064: [],
          ACCESS081: [],
          ACCESS111: []
        }
      })

      const dealerData = computed(() => {
        const d = { ...datas.detail }
        return {
          code: d.customerCode || '',
          name: d.customerName || '',
          officeCode: d.officeCode || '',
          officeName: d.officeName || '',
          createBy: d.createBy || ''
        }
      })
      // 收货地址
      const addressList = computed(() => {
        return datas.detail?.addressDTOS || []
      })
      // 门店
      const shopInfo = computed(() => {
        const {
          isDeposit,
          depositDate,
          finishedDeposit,
          customizedDeposit,
          cupboardDeposit,
          bathroomDeposit,
          shopDTO = {}
        }: any = datas.detail
        return {
          ...shopDTO,
          isDeposit,
          depositDate,
          finishedDeposit,
          customizedDeposit,
          cupboardDeposit,
          bathroomDeposit
        }
      })
      //门店联系人
      const shopContactsList = computed(() => {
        const list = datas.detail?.contactDTOS || []
        return list.filter((v: any) => v.contactScope === 3)
      })
      // 交接情况
      const handoverList = computed(() => {
        return datas.detail?.handoverDTOS || []
      })

      const getDetail = () => {
        const id = `${props.id}`
        detail(id).then((res) => {
          datas.detail = res.data
          ctx.emit('data-change', datas.detail)
        })
      }
      watch(
        () => props.id,
        () => {
          getDetail()
        },
        {
          immediate: true
        }
      )
      onMounted(() => {
        const el = document.querySelector('.qmp-nav-bar--fixed')
        const rect = el && el.getBoundingClientRect()
        datas.offsetTop = `${rect?.height}px`
      })
      onActivated(() => {
        getDetail()
      })

      const toPage = (path: string) => {
        const query: any = {
          id: props.id
        }
        /* if (path === 'shopContacts') {
          // todo:新建门店无门店编码
          query.shopCode = shopInfo.value.code
        } */
        $router.push({
          path: '/dealerNewShop/detail/' + path,
          query
        })
      }
      const getChangeTypeName = (code: any) => {
        const obj: anyObjectModle = {
          A: '变更',
          B: '新增',
          C: '停用'
        }
        return obj[code] || ''
      }

      getDetail()

      return {
        ...toRefs(datas),
        dealerData,
        shopContactsList,
        addressList,
        shopInfo,
        handoverList,
        parseTime,
        toPage,
        getChangeTypeName
      }
    }
  })
</script>
<style lang="less" scoped>
  .archive-change-detail {
    /deep/ .group-card {
      margin-left: 0;
      margin-right: 0;
    }
    /deep/ .qmp-tab {
      font-weight: bold;
    }
    .c-tab-title {
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bg-global-weaker);
      .name {
        font: var(--font-main-title-strengthen);
        color: var(--texticon-default-strong);
      }
      .more {
        margin-left: auto;
        display: flex;
        align-items: center;
        font: var(--font-main-body);
        color: var(--texticon-default-stronger);
        &::before {
          content: '';
          width: 24px;
          height: 24px;
          margin-left: 4px;
          background-size: 24px 24px;
          background-repeat: no-repeat;
          background-image: url(~@/assets/images/more.png);
        }
      }
    }
  }
  .ml8 {
    margin-left: 8px;
  }
  .w-normal {
    font-weight: normal;
  }
  .dis-detail-item {
    font: var(--font-main-body);
    color: var(--texticon-default-strong);
    .name {
      font: var(--font-main-title-strengthen);
      color: var(--texticon-default-strong);
      margin-bottom: 2px;
    }
    .person {
      margin-top: 4px;
      color: var(--texticon-color-brand-normal);
    }
  }
  .partner-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:last-child {
      margin-left: auto;
    }
  }
</style>
